/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../../styles/variables.scss";

$normal-text-font-size: 14px;
$label-text-font-size: 18px;
$text-field-width: 300px;
$modal-width: 884px;
$modal-max-height: 750px;
$modal-header-color: #464a57;
$cell-height: 2.5em;
$link-color: #0275d8;
$focused-input-color: #66afe9;

.tooltip {
  .tooltip-inner {
    &.preferences-action-tooltip {
      background-color: #000000;
      color: white;
    }
    &.entity-preferences-modal {
      transform: translateY(20px);

      &:before {
        display: none;
      }
    }
  }
}

.fast-actions-container {
  h4 {
    vertical-align: middle;
    > span {
      padding: 0;
      vertical-align: top;
      display: inline-block;
      background: transparent;
      &:hover {
        background: transparent;
      }
    }
  }
}

.modal {
  .set-preference-modal {
    margin-top: 125px;
    .modal-content {
      max-height: $modal-max-height;
      width: $modal-width;
      border-radius: 0;
      border: 0;

      .modal-header {
        padding: 0 10px;
        background-color: $modal-header-color;
        height: 40px;
        border-bottom: 0;

        .modal-title {
          margin: inherit;
          line-height: 40px;
          color: white;
          font-size: normal;
          font-size: 14px;

          .title {
            margin-left: 5px;
          }
        }
      }

      .modal-body {
        padding: 0;
        max-height: none;
        overflow: initial;

        .preferences-container {
          font-size: $normal-text-font-size;

          h4 {
            margin-top: 15px;
            font-weight: 400;
            font-size: $label-text-font-size;
          }

          .specify-preferences-container,
          .inherited-preferences-container {
            padding: 0px 40px;
          }

          table {
            background-color: #ffffff;

            thead {
              font-size: 12px;
            }

            tbody {
              td {
                input {
                  width: $text-field-width;
                }
              }
            }
          }

          .specify-preferences-container {
            .specify-preferences-description {
              h4 {
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .specify-preferences-list {
              margin-top: 15px;

              .specify-preferences-labels {
                font-weight: bold;
                font-size: 12px;

                .key-label {
                  margin-right: 315px;
                }
              }

              .specify-preferences-values {
                max-height: calc(5 * (32px + 20px));
                overflow: auto;

                .key-value-pair-preference {
                  margin: 0;
                  justify-content: initial;

                  input {
                    border: 1px solid #cccccc;
                    border-radius: 0.25rem;
                    width: 36%;
                    margin: 5px 50px 15px 0px;

                    &:focus {
                      border-color: $focused-input-color;
                    }
                  }

                  input:last-of-type {
                    margin-right: 30px;
                  }

                  button {
                    font-size: 1.6em;
                    position: relative;
                    bottom: 6px;
                    color: #333333;

                    &.add-row-btn {
                      margin-right: 10px;
                    }
                  }
                }

                div {
                  div:first-child {
                    .key-value-pair-preference {
                      margin-top: 3px;
                    }
                  }
                }
              }
            }

            .clearfix {
              .not-saving {
                &:disabled {
                  background-color: rgba(0, 0, 0, 0.25);
                  border-color: #ffffff;
                }
              }

              .fa-spinner {
                margin-right: 10px;
              }

              .reset,
              .reset-success,
              .num-rows {
                position: relative;
                top: 0.5em;
              }

              .reset {
                left: 2em;

                a {
                  cursor: pointer;
                  color: $link-color;

                  &:hover {
                    text-decoration: none;
                  }
                }
              }

              .reset-success {
                left: 3em;
              }

              .num-rows {
                margin-right: 5.5em;

                span {
                  color: #999999;
                }
              }
            }
          }

          .preferences-error {
            transform: translateY(20px);

            .bg-danger {
              padding: 0 20px;
              line-height: 30px;
            }
          }

          hr {
            margin-top: 20px;
            margin-bottom: 0;
          }

          .inherited-preferences-container {
            padding-bottom: 40px;
            padding-top: 15px;

            table {
              border-collapse: separate;
              width: 100%;
              table-layout: fixed;

              th,
              td {
                height: $cell-height;
                word-wrap: break-word;
                word-break: break-all;

                &:first-child {
                  width: 340px;
                }
              }

              tr {
                display: table;
                width: 100%;
                border-bottom: 1px solid rgba(0, 0, 0, 0.2);
              }

              thead {
                th {
                  font-size: 12px;

                  .toggleable-columns {
                    cursor: pointer;

                    .text-underline {
                      text-decoration: underline;
                    }

                    i.fa-caret-down,
                    i.fa-caret-up {
                      color: #999999;
                      margin-left: 2px;
                    }
                  }
                }
              }

              tbody {
                display: block;
                overflow: auto;
                max-height: ($cell-height * 5);
              }
            }
          }

          hr {
            border-top-color: rgba(0, 0, 0, 0.35);
          }
        }
      }
    }
  }
}
